<template>
  <div class="orderInfo">
    <div class="back">
      <a-button @click="$router.push({ name: 'OrderReturnsMoneyManagement' })"
      >返回</a-button
      >
    </div>
    <!-- 进度条 -->
    <div class="speedProgress">
      <a-steps :current="stepNum" labelPlacement="vertical" size="small" v-if="repairsLogs.length>0">
        <a-step>
          <span slot="title">客户申请退款</span>
          <span slot="description">{{repairsLogs[0].createDate}}</span>
        </a-step>
        <a-step>
          <span slot="title">待审核</span>
          <span slot="description">{{repairsLogs[1].createDate}}</span>
        </a-step>
        <a-step>
          <span slot="title">审核意见</span>
          <template v-if="applyStatus==='REFUND_OF' ||applyStatus==='REFUND_FINISH'">
            <p slot="description" v-if="this.stepNum>=2">审核人：{{handler}}</p>
            <p slot="description" v-if="this.stepNum>=2">同意退款</p>
            <p slot="description" v-if="this.stepNum>=2">{{repairsLogs[2].createDate }}</p>
          </template>
          <template v-else-if="applyStatus==='USER_CANCEL'">
            <p slot="description" v-if="this.stepNum===2">已撤销申请</p>
            <p slot="description" v-if="this.stepNum===2">{{repairsLogs[2].createDate}}</p>
          </template>
          <template v-else>
            <p slot="description" v-if="this.stepNum===2">审核人：{{handler}}</p>
            <p slot="description" v-if="this.stepNum===2">拒绝退款</p>
            <p slot="description" v-if="this.stepNum===2">已经和买家协商</p>
            <p slot="description" v-if="this.stepNum===2">{{repairsLogs[2].createDate }}</p>
          </template>
        </a-step>

        <a-step v-if="applyStatus!=='REVIEW_FAILED' && applyStatus!=='USER_CANCEL' ">
          <span slot="title">退款中</span>
          <span slot="description" v-if="stepNum>=3">{{repairsLogs[2].createDate}}</span>
        </a-step>

        <a-step v-if="applyStatus !== 'REVIEW_FAILED' && applyStatus!=='USER_CANCEL'">
          <span slot="title">退款完成</span>
          <span slot="description"  v-if="stepNum>=4">{{repairsLogs[3].createDate}}</span>
        </a-step>
      </a-steps>
    </div>

    <div class="info-title">服务单信息</div>
    <div>
      <!-- 订单信息 -->
      <a-descriptions bordered :size="size" >
        <a-descriptions-item :span="4">
          <template slot="label"
          >退款单号<span style="margin-left: 28px"></span
          ></template>
          <div style="width: 800px">{{serveNum}}</div>
        </a-descriptions-item>
        <a-descriptions-item :span="4">
          <template slot="label">申请状态</template>
          <div style="width: 800px">{{applyStatusResult}}</div>
        </a-descriptions-item>
        <a-descriptions-item label="订单编号" :span="4">
          <div style="width: 800px">{{orderNum}}</div>
        </a-descriptions-item>
        <a-descriptions-item label="申请时间" :span="4">
          <div style="width: 800px">{{handleTime[0]}}</div>
        </a-descriptions-item>
        <a-descriptions-item label="用户账号" :span="4">
          <div style="width: 800px">{{userAccount}}</div>
        </a-descriptions-item>

      </a-descriptions>
      <a-descriptions
        bordered
        style="margin-top: 20px"
        :size="size"
      >
        <a-descriptions-item label="订单金额" span="3">
          <div style="width: 800px">￥{{orderPrice}}元</div>
        </a-descriptions-item>
        <a-descriptions-item label="确认退款金额" :span="4">
          <div style="width: 800px">￥{{withdrawMoney}}元</div>
        </a-descriptions-item>
        <a-descriptions-item label="退款方式" :span="4"  >
          <div style="width: 800px" >{{withdrawWays ==1 ? '原路返回':'其它'}}</div>
        </a-descriptions-item>
        <a-descriptions-item label="退款类型" :span="4" v-if="this.stepNum>=2">
          <div style="width: 800px">取消订单</div>
        </a-descriptions-item>

        <a-descriptions-item label="退款原因" :span="4" v-if="this.stepNum>=1">
          <div style="width: 800px">{{reason}}</div>
        </a-descriptions-item>

        <a-descriptions-item label="原因描述" :span="4" v-if="this.stepNum>=1">
          <div style="width: 800px">{{reasonDesc}}</div>
        </a-descriptions-item>

        <a-descriptions-item label="凭证照片" :span="4">
          <div style="width: 800px">
            <table-img v-for="(src,index) in imgs"
                       :key="index"
                       width="80px"
                       height="80px"
                       :src="src"/>
          </div>
        </a-descriptions-item>
      </a-descriptions>
      <!-- 退款信息 -->

      <a-descriptions
        bordered
        style="margin-top: 20px"
        :size="size"

      >
        <a-descriptions-item label="处理备注" :span="4" v-if="this.stepNum ===1">
          <div style="width: 620px" >
            <a-textarea v-model="operationExplanation"
                        style="width: 500px"
                        placeholder="处理备注"
                        :auto-size="{ minRows: 2, maxRows: 6 } "
            />
          </div>
        </a-descriptions-item>

      </a-descriptions>

      <a-descriptions
        bordered
        style="margin-top: 20px"
        :size="size"
        v-show="this.stepNum>=2 &&applyStatus!=='USER_CANCEL'"
      >
        <a-descriptions-item :span="4">
          <template slot="label">处理人员<span style="margin-left: 28px"></span></template>
          <div style="width: 800px">{{handler}}</div>
        </a-descriptions-item>

        <a-descriptions-item label="处理时间" :span="4">
          <div style="width: 800px">{{handleTime[1]}}</div>
        </a-descriptions-item>

        <a-descriptions-item label="操作备注" :span="4">
          {{operationExplanation}}
        </a-descriptions-item>

      </a-descriptions>
    </div>
    <div class="footerBtn" v-show="this.stepNum===1 && applyStatus!=='USER_CANCEL'">
      <a-button type="primary" @click="confirmTK"> 确认退款 </a-button>
      <a-button type="danger" class="twoBtn" @click="refuseTK"> 拒绝退款 </a-button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "",
    components: {},
    directives: {},
    filters: {},
    mixins: [],
    model: {},
    props: {

    },
    data() {
      return {
        id:this.$route.query.id,
        size:'middle',


        // 步骤条默认1 后续根据处理状态改变
        stepNum:1,
        // 退款单号
        serveNum:'',
        // 申请状态
        applyStatus:'',
        // 申请状态中文
        applyStatusResult:'',
        // 订单编号:
        orderNum:'',
        // 申请时间
        applyTime:'',
        // 用户账号
        userAccount:'',
        // 订单金额
        orderPrice:'',
        // 确认退款金额,
        withdrawMoney:'',
        // 退款方式 1原路径返回
        withdrawWays:'',
        // 退款类型
        withdrawType:'',
        // 退款原因
        reason:'',
        //原因描述
        reasonDesc:'',
        //凭证照片
        imgs:[],
        // 处理备注
        operationExplanation:'',
        //处理时间段
        repairsLogs:[],
        // 处理人
        handler:this.$store.state.userInfo.userName,
        // 审核处理完的时间
        handleTime:[],
      };
    },
    computed: {},
    watch: {},
    beforeCreate() {},
    created() {
      // 获取用户信息
      this.accquireUserInfo()
    },
    // 方法集合
    methods: {
      async accquireUserInfo(){
        console.log('获取退款方信息')
        // const res = await this.$get(`/refund/query?id=${this.id}`)
        const res = await this.$get(`/order/goodsrepairs/query?id=${this.id}`)
        if (res && res.returnCode === 1000) {
          console.log('退款订单信息:', res)
          this.serveNum = res.dataInfo.orderGoodsRepairs.id
          this.applyStatus = res.dataInfo.orderGoodsRepairs.returnGoodsStatus
          console.log( this.applyStatus)
          // this.orderNum = res.dataInfo.orderGoodsRepairs.orderGoodsId
          this.orderNum = res.dataInfo.orderGoodsRepairs.orderNo
          this.applyTime = res.dataInfo.orderGoodsRepairs.createDate
          // 用户账号
          this.userAccount = res.dataInfo.orderGoodsRepairs.userPhone
          //订单金额 ===退款金额
          this.orderPrice = (res.dataInfo.orderGoodsRepairs.orderPayPrice /100).toFixed(2)
          this.withdrawMoney = (res.dataInfo.orderGoodsRepairs.refundPrice /100).toFixed(2)
          // 退款方式 1 原路返回
          this.withdrawWays = res.dataInfo.orderGoodsRepairs.refundWay
          console.log('退款方式:',this.withdrawWays)

          // 处理时间段
          this.repairsLogs = res.dataInfo.repairsLogs
          // 退款原因
          this.reason = res.dataInfo.orderGoodsRepairs.reason || '其他问题'
          this.reasonDesc = res.dataInfo.orderGoodsRepairs.reasonDesc || '不想要了'
          // 凭证照片
          this.imgs = (res.dataInfo.orderGoodsRepairs.imgs || '').split(',')
          this.connector = res.dataInfo.orderGoodsRepairs.userName
          this.connectorPhoneNum = res.dataInfo.orderGoodsRepairs.userPhone
          // 处理备注
          this.operationExplanation = res.dataInfo.orderGoodsRepairs.repairsNote
          //处理人
          this.handler = res.dataInfo.orderGoodsRepairs.repairsMan

          // 处理时间段
          this.handleTime = res.dataInfo.repairsLog.createDateList
          console.log('---')
          this.applyStatusResult = this.changeApplyStatus()
          this.changeInitStepNum()
        }
      },

      // 允许退款
      async confirmTK(){
        // 调仅退款的接口/order/goodsrepairs/agree/refund
        const res = await this.$post('/order/goodsrepairs/agree/refund',{
          id:this.serveNum,
          repairsType:1,
          // isAgree:1,
          // refundPrice:this.withdrawMoney,
          note:this.operationExplanation
        }).catch(()=>{})
        console.log(res)
        await this.accquireUserInfo()
      },

      //调拒绝退款的接口
      async refuseTK(){
        const res =await this.$post(`/refund/refused/refund`,{
          id:this.serveNum,
          note:this.operationExplanation
        })
        console.log(res)
        await this.accquireUserInfo()

      },

      changeApplyStatus() {
        switch (this.applyStatus) {
          case 'TO_AUDIT':
            return '待处理'
          case 'REFUND_OF':
            return '退款中'

          case 'REFUND_FINISH':
            return '已完成'

          case 'REVIEW_FAILED':
            return '已拒绝'

          case 'USER_CANCEL':
            return '已撤销申请'


        }
      },
      changeInitStepNum() {
        switch (this.applyStatus) {
          // 待处理  同意退款  用户自行取消  退款中  退款完成
          case 'TO_AUDIT':
            this.stepNum = 1
            return

          case 'REVIEW_FAILED':
            this.stepNum = 2
            return


          case'USER_CANCEL':
            this.stepNum = 2
            return


          case 'REFUND_OF':
            this.stepNum = 3
            return

          case 'REFUND_FINISH':
            this.stepNum = 4
            return
        }
      },


      //时间处理 作为方法使用(暂未用到)
      timeHandle2(time, fmt = 'YYYY-MM-DD hh:mm:ss') { // YYYY-MM-DD
        // if (!time) return 0
        let date = new Date(new Date() - 0);
        if (/(Y+)/.test(fmt)) {
          fmt = fmt.replace(RegExp.$1, date.getFullYear() + '').substr(4 - RegExp.$1.length)
        }
        let o = {
          'M+': date.getMonth() + 1,
          'D+': date.getDate(),
          'h+': date.getHours(),
          'm+': date.getMinutes(),
          's+': date.getSeconds()
        }
        for (let key in o) {
          if (new RegExp(`(${key})`).test(fmt)) {
            let str = o[key] + ''
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str :('00' + str).substr(str.length))
          }
        }
        return fmt
      },

    }
  };
</script>
<style rel='stylesheet/less' lang='less' scoped>
  //@import url();
  .orderInfo {
    .back {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      margin-bottom: 20px;
    }
    .speedProgress {
      width: 90%;
    }
    .tableFooter {
      display: flex;
      justify-content: flex-end;
    }
    .footerBtn {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      .twoBtn {
        margin: 0 20px;
      }
    }
    .info-title {
      font-size: 14px;
      height: 40px;
      background: #f5f5f5;
      border-radius: 4px;
      line-height: 40px;
      padding-left: 30px;
      position: relative;
      margin: 20px 0;

      &::before {
        content: "";
        display: inline-block;
        width: 3px;
        height: 16px;
        background: #016bff;
        border-radius: 2px;
        position: absolute;
        top: 12px;
        left: 20px;
      }
      &.title2,
      &.title3 {
        margin-top: 30px;
      }
    }
  }
</style>
